<template>
    <view class="gjl-view">
        <view class="choose-box">
            <radio-group @change="radioChange">
                <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in chooseArr" :key="item.value">
                    <view class="choose-li">
                        <view class="inner">
                            <view class="left">
                                <view class="title">
                                    {{item.title}}
                                </view>
                                <view class="small-title">
                                    {{item.smallTitle}}
                                </view>
                            </view>
                            <view class="right">
                                <mIcon type="yuan" :color="item.value == current?'#14C1FF':'#999'" size="20"></mIcon>
                            </view>
                        </view>
                    </view>
                    <view>
                        <radio :value="item.value" style="display: none;" :checked="item.value == current" />
                    </view>
                </label>
            </radio-group>
        </view>
    </view>
</template>

<script>
    export default {
        data(){
            return{
                current: 1,
                chooseArr:[
                    {
                        title: '按阅读打卡时间',
                        smallTitle: '根据图书阅读记录顺序展示',
                        value: 1
                    },
                    {
                        title: '按添加书屋时间',
                        smallTitle: '根据图书加入我的书屋顺序展示',
                        value: 2
                    },
                    // {
                    //     title: '按阅读打卡次数',
                    //     smallTitle: '根据阅读打卡次数多少展示',
                    //     value: 3
                    // },
                    {
                        title: '按出版社',
                        smallTitle: '根据出版社字母顺序展示',
                        value: 4
                    },
                    {
                        title: '按作者',
                        smallTitle: '根据作者字幕顺序展示',
                        value: 5
                    }
                ]
            }
        },
        mounted(){
            uni.getStorage({
                key: 'storeSort',
                success: (res) => {
                    console.log(res.data);
                    this.current = res.data
                }
            });
        },
        methods:{
            radioChange(e){
                console.log(e)
                this.current = e.detail.value
                uni.setStorage({
                    key: 'storeSort',
                    data: `${this.current}`,
                    success: function () {
                        uni.navigateBack({
                            delta: 1
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-view{
        min-height: 100%;
        background:rgba(249,249,249,1);
        .choose-box{
            .choose-li{
                margin-top: 20rpx;
            }
            .choose-li{
                background:rgba(255,255,255,1);
                padding: 40rpx 30rpx 37rpx;
                .inner{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .left{
                        .title{
                            font-size:28rpx;
                            font-weight:bold;
                            color:rgba(51,51,51,1);
                        }
                        .small-title{
                            margin-top: 10rpx;
                            font-size:24rpx;
                            font-weight:400;
                            color:rgba(153,153,153,1);
                        }
                    }
                    .right{
                        
                    }
                }
            }
        }
    }
</style>
